<!-- 可编辑单元格组件-->
<template>
    <div class="editable-cell">
        <liaBilitiesList ref="modalRef" :doindex="doindex" :listNumber="listNumber" :uid='uid' :col="col" :stalid="stalid" @childByValue="childByValue" @calculation="calculationclick"></liaBilitiesList>
        <div v-if="doindex == 3" style="text-align:center;">{{value}}</div>
        <div v-else>
            <div v-if="editable" class="editable-cell-input-wrapper">
                <div v-if="col=='FinaltermOne' || col=='BeginningOne' || col=='FinaltermTow' || col=='BeginningTow' ">
                    <a-input style="float:left" oninput="value=value.toString().match(/^[=\d]+(?:\.\d{0,2})?/)" :value="value" ref="focusInput" @change="handleChange" @pressEnter="check" @blur="check" />
                    <!-- <a-icon style="width:20%;float:right;line-height:26px" type="edit" @click="showBilities" /> -->
                </div>
                <a-input style="text-align:right;" v-else-if="col=='Assetsa'" :value="value" ref="focusid" @change="handleChange" @pressEnter="check" @blur="check"></a-input>
                <div v-else-if="col=='index'" class="ellipsis-text">
                    {{ value || '&nbsp;' }}
                </div>
                <a-input v-else :value="konnullstrs(value)" style="padding: 0 10px" ref="focusid" @change="handleChange" @pressEnter="check" @blur="check" />
            </div>

            <div v-else class="editable-cell-text-wrapper" @click="edit">
                <div class="ellipsis-text" v-if="col=='FinaltermOne' || col=='BeginningOne' || col=='FinaltermTow' || col=='BeginningTow' ">
                    {{ fiexdStr(value) || '&nbsp;' }}
                </div>
                <div class="ellipsis-text" v-else v-html="konnullstr(value)">
                    <!-- value?value.replaceAll('-',' '):''  -->
                    <!-- {{  konnullstr(value) }} -->
                </div>
            </div>
        </div>
    </div>
</template>
<script>

import searchGroupDetail from "@/components/PopUpLayer/searchGroupDetail";
import liaBilitiesList from './liaBilitieslist'
import moment from "moment";
export default {
    props: {
        text: String,
        col: {
            type: String,
            default: ''
        },
        doindex: { //  行号
            type: Number,
            default: ''
        },
        listNumber: {   // 总行数
            type: Number,
            default: ''
        },
        record: {
            type: Object, // 点击行所有数据
            default: () => { }
        },
        dataSource: {
            type: Array,
            default: () => []
        }
    },
    components: {
        searchGroupDetail,
        liaBilitiesList
    },
    data () {
        return {
            value: this.text,
            editable: false,
            stalid: '',
            uid: '',
            beginAmountDirection: '',
            runsdata: [],
            liaArray: ['FinaltermOne', 'BeginningOne', 'FinaltermTow', 'BeginningTow']
        };
    },
    mounted () {
    },
    created () {
    },
    methods: {
        moment,
        childByValue (val) {
            this.runsdata = val;
            this.$emit('runDataTale', this.runsdata);
        },

        fiexdStr (val) {
            if (val != '#NAME?' && val) {
                return Number(val).toFixed(2)
            }
            if (val == '#NAME?') {
                return val
            }

        },

        // 显示空格处理
        konnullstr (val) {

            if (this.col != 'index') {
                if (val) {
                    return val.replaceAll('-', '&nbsp;')
                } else {
                    return '&nbsp;'
                }
            } else {
                return val
            }

        },
        // input空格处理
        konnullstrs (val) {

            if (this.col != 'index') {
                if (val) {
                    return val.replaceAll('-', ' ')
                } else {
                    return ' '
                }
            } else {
                return val
            }

        },

        calculationclick (val) {
            this.$emit('calculationlist', val)
        },
        //==========================默认输入框==========================
        handleChange (e) {
            if (e.target.value == '=') {
                this.showBilities();
            } else {
                let value = e.target.value;
                this.value = value;
            }
        },
        check (type) {
            if (this.col == 'Assets' || this.col == 'Liabilities') {
                if (this.value) {
                    this.value = this.value.replaceAll(' ', '-');
                }
            }
            setTimeout(() => {
                this.editable = false;
                if (this.col == 'debitAmount' || this.col == 'creditAmount') {
                    let reg = /^([-+])?\d+(\.[0-9]{1,2})?$/;
                    if (!reg.test(this.value)) {
                        this.value = null;
                        return
                    }
                }
                this.$emit("change", this.value);
            }, 200)
        },
        //==========================默认输入框==========================

        edit () {
            this.editable = true;
            if (this.col == 'FinaltermOne') {
                this.stalid = this.doindex;
                this.uid = this.record.Cid;
            }
            if (this.col == 'BeginningOne') {
                this.stalid = this.doindex;
                this.uid = this.record.Did;
            }
            if (this.col == 'FinaltermTow') {
                this.stalid = this.doindex;
                this.uid = this.record.Gid;
            }
            if (this.col == 'BeginningTow') {
                this.stalid = this.doindex;
                this.uid = this.record.Hid;
            }
            if (this.col == 'FinaltermOne' || this.col == 'BeginningOne' || this.col == 'FinaltermTow' || this.col == 'BeginningTow') {
                this.$nextTick(() => {
                    this.$refs.focusInput.focus();
                })
            }

            if (this.col == 'Assetssa') {
                this.componentName = 'Assetssa';
                this.$nextTick(() => {
                    this.$refs.focusid.focus();
                })
            } else {
                this.$nextTick(() => {
                    if (this.$refs.focusid) {
                        this.$refs.focusid.focus();
                    }
                });
            }
            // 行标显示
            this.$emit('trademark', [this.col, this.doindex])

        },
        searchBackData (record) {
            this.editable = false;
            if (record) {
                if (record.constructor === Object || record.constructor === Array) {
                    this.value = record.name;
                    this.$emit("change", record);
                }
            } else {
                this.$emit("change");
            }
        },
        handleSelectChange (value, label) {
            this.editable = false;
            this.beginAmountDirection = label.componentOptions.propsData.label;
            this.value = label.componentOptions.propsData.label;
            this.$emit("change", value);
        },
        handleSelectBlur () {
            this.editable = false;
        },
        showBilities () {
            console.log(this.record)
            this.$refs.modalRef.showModal();
        }
    },
};
</script>
<style lang="less" scoped>
    .ellipsis-text {
        padding: 0 10px 0 10px;
    }
    .editable-cell {
        position: relative;
        height: 30px;
        line-height: 30px;
        width: 100%;
        margin: 0 auto;
        cursor: pointer;
        .ant-input {
            height: 30px;
            text-align: left;
            font-size: 13px;
            padding: 0;
            border: 1px solid #000 !important;
        }
        .ant-select-selection--single {
            height: 28px !important;
        }
        .ant-select-selection {
            border: 1px solid #000 !important;
        }
    }
    .editable-cell-input-wrapper {
        padding: 0;
    }
    .editable-cell-text-wrapper {
        padding: 0;
        height: 100%;
        width: 100%;
    }
    .editable-cell-icon,
    .editable-cell-icon-check {
        position: absolute;
        right: 0;
        width: 20px;
        cursor: pointer;
    }

    .editable-cell-icon {
        line-height: 18px;
        display: none;
    }

    .editable-cell-icon-check {
        line-height: 28px;
    }

    .editable-cell:hover .editable-cell-icon {
        display: inline-block;
    }

    .editable-cell-icon:hover,
    .editable-cell-icon-check:hover {
        color: #108ee9;
    }

    .editable-add-btn {
        margin-bottom: 8px;
    }

    .editable-cell-input-search {
        position: relative;
    }
</style>